<template>
	<view class="body">
		<text class="textStyle">
			请输入完整信息
		</text>
		<view class="mainBox">
			<u-form :model="model" ref="uForm">
				<u-form-item label-width="150" :label-position="labelPosition" label="农场名称" prop="farmName">
					<u-input :border="border" placeholder="请输入农场名称" v-model="model.farmName" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="农田照片" prop="photoFarm" label-width="150">
					<u-upload width="160" height="160" max-count="1" :file-list="model.photoFarm" :auto-upload="false"
						@on-list-change="showListFarm"></u-upload>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="土壤图片" prop="photo" label-width="150">
					<u-upload width="160" height="160" max-count="1" :file-list="model.img" :auto-upload="false"
						@on-list-change="showList"></u-upload>
				</u-form-item>
				<u-form-item label="土壤类型" prop="trType" label-width="150">
					<u-input :border="border" type="select" :select-open="selectShow" v-model="model.trType"
						placeholder="请选择土壤类型" @click="selectShow = true"></u-input>
				</u-form-item>
				<u-form-item label-width="120" :label-position="labelPosition" label="含水率" prop="rate">
					<u-input :border="border" placeholder="上传土壤图片并选择土壤后自动获取" v-model="model.rate" type="text"></u-input>
					%
				</u-form-item>
				<u-form-item label="农作物" prop="nongzuowu" label-width="150">
					<u-input :border="border" type="select" :select-open="selectShowNZW" v-model="model.nongzuowu"
						placeholder="请选择农作物" @click="selectShowNZW = true"></u-input>
				</u-form-item>
				<!-- <u-form-item label-width="120" :label-position="labelPosition" label="农作物" prop="nongzuowu">
					<u-input :border="border" placeholder="请输入农作物" v-model="model.nongzuowu" type="text"></u-input>
				</u-form-item> -->
				<u-form-item label-width="160" :label-position="labelPosition" label="农用地面积" prop="nzwArea">
					<u-input :border="border" placeholder="请输入农用地面积" v-model="model.nzwArea" type="text"></u-input>亩
				</u-form-item>
				<u-form-item label-width="160" :label-position="labelPosition" label="经度" prop="longitude">
					<u-input :border="border" placeholder="请输入经度" v-model="model.longitude" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="160" :label-position="labelPosition" label="纬度" prop="latitude">
					<u-input :border="border" placeholder="请输入纬度" v-model="model.latitude" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="160" :label-position="labelPosition" label="地址" prop="address">
					<u-input :border="border" placeholder="请输入地址" v-model="model.address" type="text"></u-input>
					<view class="icon iconfont icon-dibiao" @click="chooseLocation"></view>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="灌溉方式" prop="ggway" label-width="150">
					<u-radio-group v-model="model.ggway" @change="radioGroupChange" :wrap="radioCheckWrap">
						<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
			<u-button :ripple="true" ripple-bg-color="#909399" class="btn" type="success" shape="circle" @click="open">
				保存</u-button>
		</view>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
		<u-select mode="single-column" :list="cropList" v-model="selectShowNZW" @confirm="selectConfirmNZW"></u-select>
		<u-modal v-model="show" :content="content" @confirm="back"></u-modal>
	</view>
</template>

<script>
	import {
		getBase64
	} from "@/common/util/base64.js"

	import {
		uploadImg,
		getRate
	} from "@/common/api/water.js"
	import {
		getUser
	} from "@/common/entity/user.js"
	
	import {addFarmland} from '@/common/api/water.js'
	export default {
		data() {
			return {
				model: {
					farmName: '',
					nongzuowu: '',
					nzwArea: '',
					nzwType: '',
					trType: '',
					soiltype: 0,
					ggway: '',
					latitude: '',
					longitude: '',
					address: '',
					img: [],
					photoFarm: [],
					rate: '',
					imgPath: '',
					imgPathFarm: '',
					city:''
				},
				border: false,
				labelPosition: 'left',
				radioCheckWrap: false,
				selectShow: false,
				selectShowNZW: false,
				radioList: [{
						name: '滴灌',
						checked: true,
						disabled: false
					},
					{
						name: '滴灌喷灌',
						checked: false,
						disabled: false
					},
					{
						name: '人工灌溉',
						checked: false,
						disabled: false
					}
				],
				selectList: [{
						value: '1',
						label: '砂土'
					},
					{
						value: '2',
						label: '砂壤土'
					},
					{
						value: '3',
						label: '壤土'
					},
					{
						value: '4',
						label: '粘土'
					},
					{
						value: '5',
						label: '重粘土'
					}
				],
				cropList: [{
						value: '1',
						label: '小麦初期'
					},
					{
						value: '2',
						label: '小麦中期'
					},
					{
						value: '3',
						label: '小麦末期'
					},
					{
						value: '4',
						label: '棉花初期'
					},
					{
						value: '5',
						label: '棉花中期'
					},
					{
						value: '6',
						label: '棉花末期'
					},
				],
				show: false,
				content: '新增成功'
			}
		},
		watch: {
			"model.trType": {
				handler(val, newVal) {
					if (this.model.imgPath == '') {
						this.model.trType = ''
						this.$u.toast('请先上传土壤图片')
					} else {
						console.log(1, this.model.imgPath)
						let soiltype = this.selectList.filter(a => {
							return a.label == this.model.trType
						})
						uni.showLoading({
							title: '加载中',
							mask: true
						});

						console.log(this.model.trType)
						this.model.soiltype = parseInt(soiltype[0].value)
						getRate({
							path: this.model.imgPath,
							soil: parseInt(soiltype[0].value),
						}).then(res => {
							uni.hideLoading()
							this.model.rate = parseFloat((res[1].data * 100).toFixed(2));
							this.$u.toast("该土地的含水率为：" + this.model.rate + "%")
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			selectConfirm(e) {
				this.model.trType = '';
				e.map((val, index) => {
					this.model.trType += this.model.trType == '' ? val.label : '-' + val.label;
				})
			},
			selectConfirmNZW(e) {
				this.model.crop = parseInt(e[0].value)
				console.log(e)
				this.model.nongzuowu = '';
				e.map((val, index) => {
					this.model.nongzuowu += this.model.nongzuowu == '' ? val.label : '-' + val.label;
				})
			},
			radioGroupChange(e) {
				this.model.ggway = e
			},
			showList(res, index, lists, name) {

				if (res.length == 0) {
					this.model.imgPath = ''
					this.model.trType = ''
					this.model.rate = ''
					return;
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getBase64(res[0].file).then((res) => {
					console.log(res);
					uploadImg({
						imgCode: res,
					}).then(res => {
						uni.hideLoading()
						console.log("https://crop.lxylw.design" + res[1].data.imgPath)
						this.model.imgPath = res[1].data.imgPath.split("/static/")[1]
					})
				})
			},
			showListFarm(res){
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getBase64(res[0].file).then((res) => {
					console.log(res);
					uploadImg({
						imgCode: res,
					}).then(res => {
						uni.hideLoading()
						console.log("https://crop.lxylw.design" + res[1].data.imgPath)
						this.model.imgPathFarm = res[1].data.imgPath
					})
				})
			},
			getLocation() {
				uni.showToast({
					duration: 500,
					title: '获取当前位置信息中...',
					icon: 'none'
				})
				let _this = this
				uni.getLocation({ //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						_this.model.latitude = res.latitude;
						_this.model.longitude = res.longitude;
						console.log('当前位置的经度：' + longitude);
						console.log('当前位置的纬度：' + latitude);
						localStorage.setItem("location",longitude.toFixed(2)+','+latitude.toFixed(2))

						var map = new AMap.Map("container", {
							resizeEnable: true,
						});
						AMap.plugin("AMap.Geocoder", function() {
							var geocoder = new AMap.Geocoder();
							var lnglat = [longitude, latitude];

							geocoder.getAddress(lnglat, function(status, data) {
								if (status === "complete" && data.info === "OK") {
									// result为对应的地理位置详细信息
									console.log(data.regeocode);
									_this.model.city = data.regeocode.addressComponent.city
									
									_this.model.address = data.regeocode.formattedAddress
									_this.$u.toast('获取地址成功！');
								}
							});
						});
					}
				});

			},
			chooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						_this.model.address = res.address
						console.log('纬度：' + res.latitude);
						_this.model.latitude = res.latitude
						console.log('经度：' + res.longitude);
						_this.model.longitude = res.longitude
					}
				});
			},
			open() {
				let model = this.model
				let rs = {
					soilname: model.farmName,
					soilphotourl: model.imgPathFarm,
					soiltype: model.soiltype,
					crop: model.crop,
					jindu: model.longitude,
					weidu: model.latitude,
					place: model.address,
					watertype: model.ggway,
					waterarea: model.nzwArea,
					soilbelong: getUser().id,
					curwater: model.rate,
					city:model.city
				}

				console.log(rs)
				addFarmland(rs).then(res=>{
					console.log(res[1])
					if(res[1].data.result){
						this.show = true;
					}else{
						this.$u.toast('请填写正确农田信息')
					}
				})
			}
		},
		onLoad() {
			const oScript = document.createElement('script');
			oScript.type = 'text/javascript';
			oScript.src = 'https://webapi.amap.com/maps?v=1.4.15&key=48f34dbbd5b371c23a79f3dc134d48e6';
			document.body.appendChild(oScript);

			setTimeout(() => {
				this.getLocation()
			}, 500)
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		padding: 40rpx 0;
	}

	.textStyle {
		margin-left: 40rpx;
		color: #606266;
		font-weight: 600;
	}

	.textStyle:after {
		position: absolute;
		width: 8rpx;
		height: 38rpx;
		content: "";
		left: 24rpx;
		border-radius: 10rpx;
		background-color: #606266;
	}

	.mainBox {
		margin: 30rpx;
		border-top: 2rpx solid #eee;

		.btn {
			margin-top: 30rpx;
		}
	}
</style>
